<template>
  <j-modal :title="title" :width="900" :visible="visible" :confirmLoading="loading" switchFullscreen
    @cancel="handleCancel" @ok="handleOk">
    <a-form-model ref="ruleForm" :rules="rules" :model="addUnsealVarifiStartDTO" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="策略名称" prop="policyName">
            <a-input v-model="addUnsealVarifiStartDTO.policyName" placeholder="请输入" :disabled="flag"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="周期" prop="cycle">
            <a-select v-model="addUnsealVarifiStartDTO.cycle" allowClear placeholder="请选择" style="width:100%;" :disabled="flag" >
              <a-select-option v-for="(item, key) in cycle" :key="key" :value="item.value" >{{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="起始时间" prop="startTime">
            <a-date-picker v-model="addUnsealVarifiStartDTO.startTime" allowClear style="width:100%;" format="YYYY-MM-DD HH:MM:SS"
              valueFormat="YYYY-MM-DD HH:MM:SS" :disabled="flag"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="截至时间" prop="endTime">
            <a-date-picker v-model="addUnsealVarifiStartDTO.endTime" allowClear style="width:100%;" format="YYYY-MM-DD HH:MM:SS"
              valueFormat="YYYY-MM-DD HH:MM:SS" :disabled="flag"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="启用状态" prop="enableStatus" >
            <a-radio-group name="radioGroup" v-model="addUnsealVarifiStartDTO.enableStatus" :disabled="flag">
              <a-radio :value="'1'">启用</a-radio>
              <a-radio :value="'0'">停用</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="是否立即执行" prop="whetherToExecute">
            <a-radio-group name="radioGroup1" v-model="addUnsealVarifiStartDTO.whetherToExecute" :disabled="flag">
              <a-radio :value="'1'">是</a-radio>
              <a-radio :value="'0'">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11" class="textareaBox" >
          <a-form-model-item label="备注" prop="remarks">
            <!-- <div class="textarea">111</div> -->
            <a-textarea placeholder="请输入备注" v-model="addUnsealVarifiStartDTO.remarks" 
            :autosize="{ minRows: 6, maxRows: 8 }" :disabled="flag" :maxLength="300" @input="numLimit" />
            <!-- <div class="textarea">{{number}}/300</div> -->
            
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>
<script>
import { getDictItemsFromCache } from '@/api/api'
import { saveBlockingAutoRandom,findByIdBlockingAutoRandom} from '@/api/plugging/Police'
// import * as interviewApi from '@/api/sjsk/help/interview.js'
export default {
  props: ['title'],
  data() {
    return {
      number:300,
      idDTO:{
        id:''
      },
      flag:false,
      visible: false,
      // form: { name: "" },
      addUnsealVarifiStartDTO: {},
      loading: false,
      isAdd: true,
      cycle: getDictItemsFromCache('fd_cycle'),
      rules: {
        policyName: [{ required: true, message: '请输入' }],
        cycle: [{ required: true, message: '请输入' }],
        startTime: [{ required: true, message: '请输入' }],
        endTime: [{ required: true, message: '请输入' },
                  { validator: this.timerule,trigger: 'change'}],
        enableStatus: [{ required: true, message: '请输入' },
                      { validator: this.statusrule,trigger: 'change'}],
        whetherToExecute: [{ required: true, message: '请输入' },
                          { validator: this.Executerule,}],
        remarks: [{ required: true, message: '请输入' }],
      },
    }
  },
  async created() {
  },
  mounted () {
    console.log(this.cycle);
  },
  methods: {
    numLimit(){
      let num = this.addUnsealVarifiStartDTO.remarks.length
      this.number = 300 - num
    },
    show(record) {
      this.visible = true
      if(record){
        this.idDTO.id = record.id
        this.flag = true
        this.onDetails()
      }
      else{
        this.idDTO.id = ''
        this.flag = false
      }
      // this.form.name = ""
      // if (type == 1) this.form.parentId = "0" //添加第一层节点
      // if (type == 2) this.form.parentId = record.key //添加下一层节点
      // if (type == 3) { //编辑节点
      //   this.isAdd = false
      //   this.form.id = record.key
      //   this.form.name = record.title
      // } else {
      this.isAdd = true
      // }
    },
    onTimeChange1(date) {
      
      this.$set(this.pageFilter, 'startRvDate', date[0])
      this.$set(this.pageFilter, 'endRvDate', date[1])
    },
    onTimeChange2(date) {
      this.$set(this.pageFilter, 'startRvDate', date[0])
      this.$set(this.pageFilter, 'endRvDate', date[1])
    },
    handleCancel() {
      this.visible = false
      this.addUnsealVarifiStartDTO = {}
    },
    async handleOk() {
      if(!this.idDTO.id){
      await this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          saveBlockingAutoRandom(this.addUnsealVarifiStartDTO).then( res => {
            if (res.success) {
              this.$message.success(res.message)
              this.visible = false
              this.$emit('add')
            } else {
              this.$message.success(res.message)
              this.loading = false
              this.visible = false
            }
            })
            .catch((e) => {
              this.loading = false
              this.$message.warn('请求失败！')
              this.visible = false
            })
          this.addUnsealVarifiStartDTO = {}
        }
      })
      }
      else{ this.visible = false }
      // this.addUnsealVarifiStartDTO = {}
    },
    onDetails(){
      findByIdBlockingAutoRandom(this.idDTO).then( res => {
          if (res.success) {
            this.addUnsealVarifiStartDTO = res.result
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
    },
    timerule(rule,value,callback){
      let a = this.addUnsealVarifiStartDTO.startTime
      let b = this.addUnsealVarifiStartDTO.endTime
      if(a>b){
        callback('截止时间不能大于起始时间')
      }
      else{
        callback()
      }
    },
    statusrule(rule,value,callback){
      let a = this.addUnsealVarifiStartDTO.whetherToExecute
      // let b = this.addUnsealVarifiStartDTO.endTime
      console.log(a == 1);
      if(a == 1){
        if(value == 2){
          callback('立即执行时必须为启用状态')
        }
        else{
          callback()
        }
      }
      else{
        callback()
      }
    },
    Executerule(rule,value,callback){
      let a = this.addUnsealVarifiStartDTO.startTime
      let b = this.addUnsealVarifiStartDTO.endTime
      let timestampToTime = (timestamp) => {
      if (timestamp === 0 || timestamp == null) {
        return ''
      } else {
        var date = new Date(Date.parse(timestamp))
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
        var H = date.getHours() + ':'
        var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
        var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return Y + M + D + H + M2 + S
        }
      }
      let c = timestampToTime(new Date())
      if(a<c&&c<b){
        if(value == 2){
          callback('时间区间内必须为立即执行')
        }
        else{
          callback()
        }
      }
      else{
        callback()
      }
    },
    
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-row {
  margin-bottom: 8px !important;
}

.textareaBox {
  position: relative;
  width: 100%;

  /deep/.ant-form-item-label {
    width: 13.5%;
  }

  /deep/.ant-form-item-control-wrapper {
    width: 80%;
  }
}

.textarea {
  position: absolute;
  font-size: 15px;
  text-align: right;
  right:1000;
  top:1000;
  z-index: 1000000000;
  // margin-right: 15px;
}
</style>
